<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>商品展示</title>
    <style>
        body {
            font-family: 'PingFang SC', Helvetica, Helvetica, 'Microsoft YaHei', 微软雅黑, Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #FFEEF7;
            margin-top: 40px;
        }

        .product-group {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
        }

        .product-item {
            text-align: center;
            margin-bottom: 20px;
            position: relative;
            flex: 0 0 calc(33.33% - 20px);
        }

        .product-item:before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
            background-color: rgba(255, 255, 255, 0.3);
            z-index: -1;
        }

        a img {
            display: block;
            width: 300px;
            height: 300px;
            border: 0;
            transition: transform 0.3s ease;
            border-radius: 8px;
            margin: 0 auto;
            align-items: center; /* 水平居中 */
            justify-content: center; /* 垂直居中 */
            margin-top: 10px;
        }

        .product-item:hover a img {
            transform: scale(1.1);
        }

        .product-name {
            color: #333;
            font-size: 21px;
            font-weight: 500;
            letter-spacing: 1px;
            padding: 10px;
            text-align: center;
        }

        .product-price {
            color: #CB986D;
            font-size: 21px;
            font-weight: 500;
            letter-spacing: normal;
            padding: 10px;
            text-align: center;
        }
        .product-item.empty {
         visibility: hidden;
         height: 100%;
     }
    </style>
</head>

<body>
<div class="product-group">
    <div class="product-item">
        <a href="productview/cake1.html" onclick="scrollToTop();">
            <img src="productview/images/奶油云端.jpg" alt="Hello Kitty 合作限定 奶油云端">
        </a>
        <div class="product-name">Hello Kitty 合作限定 奶油云端</div>
        <div class="product-price">-100%动物奶油 &yen; 299</div>
    </div>
    <div class="product-item">
        <a href="productview/cake2.html" onclick="scrollToTop();">
            <img src="productview/images/蝴蝶结.jpg" alt="Hello Kitty 合作限定 蝴蝶结公主">
        </a>
        <div class="product-name">Hello Kitty 合作限定 蝴蝶结公主</div>
        <div class="product-price">-100%动物奶油 &yen; 299</div>
    </div>
    <div class="product-item">
        <a href="productview/cake3.html" onclick="scrollToTop();">
            <img src="productview/images/3.jpg" alt="Hello Kitty 合作限定 可爱相伴">
        </a>
        <div class="product-name">Hello Kitty 合作限定 可爱相伴</div>
        <div class="product-price">-100%动物奶油 &yen; 269</div>
    </div>
</div>
<div class="product-group">
    <div class="product-item">
        <a href="productview/cake4.html" onclick="scrollToTop();">
            <img src="productview/images/4.jpg" alt="芭比联名系列-心悦芭比">
        </a>
        <div class="product-name">芭比联名系列-心悦芭比</div>
        <div class="product-price">-100%动物奶油 &yen; 299</div>
    </div>
    <div class="product-item">
        <a href="productview/cake5.html" onclick="scrollToTop();">
            <img src="productview/images/5.jpg" alt="长相思联名系列-茶心芝士">
        </a>
        <div class="product-name">长相思联名系列-茶心芝士</div>
        <div class="product-price">&yen; 39</div>
    </div>
    <div class="product-item">
        <a href="productview/cake6.html" onclick="scrollToTop();">
            <img src="productview/images/爪爪派.jpg" alt="疯狂动物城联名系列-爪爪派">
        </a>
        <div class="product-name">疯狂动物城联名系列-爪爪派</div>
        <div class="product-price">&yen; 12</div>
    </div>
</div>
<div class="product-group">
    <div class="product-item">
        <a href="productview/cake7.html" onclick="scrollToTop();">
            <img src="productview/images/7.jpg" alt="Hello Kitty 合作限定 可爱出动">
        </a>
        <div class="product-name">Hello Kitty 合作限定 可爱出动</div>
        <div class="product-price">-100%动物奶油 &yen; 269</div>
    </div>
    <div class="product-item">
        <a href="productview/cake8.html" onclick="scrollToTop();">
            <img src="productview/images/8.jpg" alt="芝巧熔岩巴斯克">
        </a>
        <div class="product-name">芝巧熔岩巴斯克</div>
        <div class="product-price">&yen; 29</div>
    </div>
    <div class="product-item">
        <a href="productview/cake10.html" onclick="scrollToTop();">
            <img src="productview/images/9.jpg" alt="半熟芝士-糕点">
        </a>
        <div class="product-name">半熟芝士-糕点</div>
        <div class="product-price">&yen; 39</div>
    </div>
</div>
<script>
    // JavaScript 函数，用于点击商品时返回顶部
    function scrollToTop() {
        window.scrollTo({top: 0, behavior: 'smooth'});
    }
</script>
</body>

</html>